<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('recharge.ccdd')" :leftIcon="true"></navbar>
		
		<view class="bg-box">
			<!-- 订单信息 -->
			<view class="order-card">
				<!-- USDT图标 -->
				<view class="usdt-icon">
					<image src="/static/icon/ccdd-icon.svg" mode="aspectFit"></image>
				</view>
				
				<!-- 订单号 -->
				<view class="order-number">
					<text class="order-label">{{ t('recharge.ddh') }}: {{ orderData.orderNo || '--' }}</text>
					<image src="/static/icon/copy-icon.svg" mode="aspectFit" class="copy-icon" @click="copyOrderNumber"></image>
				</view>
				
				<!-- 提示信息 -->
				<view class="tip-box">
					<image src="/static/icon/tip.svg" mode="aspectFit" class="tip-icon"></image>
					<text class="tip-text">{{ t('recharge.zjtrc20') }}</text>
				</view>
				
				<!-- 金额 -->
				<view class="amount-box">
					<text class="amount">{{ orderData.amount || '0.00' }}</text>
					<text class="currency">USDT</text>
					<view class="amount-tip">{{ t('recharge.yzje') }}</view>
				</view>
			</view>
			
			<!-- 支付二维码 -->
			<view class="section">
				<view class="section-title">
					<view class="title-line"></view>
					<text class="title-text">{{ t('recharge.zfewm') }}</text>
				</view>
				
				<view class="qrcode-wrapper">
					<view class="qrcode-bg">
						<view class="qrcode-bg2">
							<uqrcode ref="qrcode" canvas-id="qrcode" :value="paymentAddress" :size="241.24" :margin="10" foreground="#000000" background="#ffffff"></uqrcode>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 支付地址 -->
			<view class="section">
				<view class="section-title">
					<view class="title-line"></view>
					<text class="title-text">{{ t('recharge.zfdz') }}</text>
				</view>
				
				<view class="address-box">
					<text class="address">{{ orderData.paymentAddress || '--' }}</text>
					<image src="/static/icon/copy-icon.svg" mode="aspectFit" class="copy-icon" @click="copyAddress"></image>
				</view>
			</view>
			
			<!-- 提示 -->
			<view class="tips-section">
				<text class="tips-title">{{ t('recharge.ts') }}:</text>
				<text class="tips-item">1. {{ t('recharge.tishi1') }}【{{ t('recharge.wczf') }}】{{ t('recharge.jkdz') }}</text>
				<text class="tips-item">2. {{ t('recharge.tishi2') }}</text>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-button btn-primary" @click="czwc">
				<text>{{ t('recharge.wczf') }}</text>
			</view>
		</view>
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useI18n } from 'vue-i18n';
	import { tronOrderApi } from '@/utils/api.js';
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue';
	const { t, locale } = useI18n();
	const popup = ref()
	
	// 订单数据
	const orderData = ref({
		orderNo: '',
		amount: 0,
		paymentAddress: 'TW4V7n2MFENVm6tNvbDUvsygC5L2YdtsZu',
		status: ''
	});
	
	// 支付地址
	const paymentAddress = ref('TW4V7n2MFENVm6tNvbDUvsygC5L2YdtsZu');
	
	// 复制订单号
	const copyOrderNumber = () => {
		if (orderData.value.orderNo) {
			uni.setClipboardData({
				data: orderData.value.orderNo,
				success: () => {
					popup.value.open({
						title: t('common.fzcg'),
						loading: false
					});
				}
			});
		}
	};
	
	// 复制地址
	const copyAddress = () => {
		if (orderData.value.paymentAddress) {
			uni.setClipboardData({
				data: orderData.value.paymentAddress,
				success: () => {
					popup.value.open({
						title: t('common.fzcg'),
						loading: false
					});
				}
			});
		}
	};
	// 获取订单详情
	const fetchOrderDetail = async (orderId) => {
		try {
			const response = await tronOrderApi.getByOrder(orderId);
			
			if (response && response.data) {
				const data = response.data;
				orderData.value = {
					orderNo: data.orderNo || data.orderId || orderId,
					amount: data.amount || 0,
					paymentAddress: data.token || '', // 使用token字段作为支付地址
					status: data.status || ''
				};
				
				// 更新支付地址用于二维码生成
				paymentAddress.value = orderData.value.paymentAddress;
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			popup.value.open({
				title: t('common.error'),
				content: '获取订单详情失败，请重试',
				loading: false,
				warning: true
			});
		}
	};
	
	// 操作完成 验证
	const czwc = async () => {
		try {
			// 获取当前页面的订单ID
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const options = currentPage.options;
			
			if (!options.orderId) {
				popup.value.open({
					title: t('common.error'),
					content: '缺少订单ID参数',
					loading: false,
					warning: true
				});
				return;
			}
			
			// 调用订单状态查询接口
			const response = await tronOrderApi.getByOrder(options.orderId);
			
			if (response && response.data) {
				const status = response.data.status;
				let title = '';
				let content = '';
				let warning = false;
				
				switch (status) {
					case 1:
						title = '未支付';
						content = '订单尚未支付，请完成支付后再次确认';
						warning = true;
						break;
					case 2:
						title = '支付成功';
						content = '订单已支付成功！';
						warning = false;
						break;
					case 3:
						title = '订单已过期';
						content = '订单已过期，请重新创建订单';
						warning = true;
						break;
					default:
						title = '未知状态';
						content = `订单状态：${status}`;
						warning = true;
				}
				
				popup.value.open({
					title: title,
					content: content,
					loading: false,
					warning: warning
				});
			} else {
				popup.value.open({
					title: t('common.error'),
					content: '查询订单状态失败，请重试',
					loading: false,
					warning: true
				});
			}
		} catch (error) {
			console.error('查询订单状态失败:', error);
			popup.value.open({
				title: t('common.error'),
				content: '查询订单状态失败，请重试',
				loading: false,
				warning: true
			});
		}
	};
	
	// 页面加载时获取订单详情
	onMounted(() => {
		// 获取页面参数中的订单ID
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const options = currentPage.options;
		
		if (options.orderId) {
			fetchOrderDetail(options.orderId);
		} else {
			// 如果没有订单ID，显示错误
			popup.value.open({
				title: t('common.error'),
				content: '缺少订单ID参数',
				loading: false,
				warning: true
			});
		}
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 20rpx 41.81rpx 40rpx;
		box-sizing: border-box;
	}
	.bg-box{
		background-color: #FFFFFF;
		border-radius: 20.93rpx;
		padding:69.69rpx 69.69rpx;
	}
	.order-card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.usdt-icon {
		width: 104.13rpx;
		height: 104.13rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image {
			width: 104.13rpx;
			height: 104.13rpx;
		}
	}
	
	.order-number {
		display: flex;
		align-items: center;
		margin-top: 20.93rpx;
		
		.order-label {
			font-size: 20.93rpx;
			color: #333;
		}
		
		.copy-icon {
			width: 27.91rpx;
			height: 27.91rpx;
			margin-left: 13.95rpx;
		}
	}
	
	.tip-box {
		display: flex;
		align-items: center;
		margin-top: 20.93rpx;
		border-radius: 6.98rpx;
		padding: 6.98rpx 13.95rpx;
		
		.tip-icon {
			width: 42.68rpx;
			height: 42.68rpx;
			margin-right: 6.98rpx;
		}
		
		.tip-text {
			font-size: 20.93rpx;
			font-weight: 500;
			color: #000;
		}
	}
	
	.amount-box {
		display: flex;
		align-items: baseline;
		margin-top: 27.87rpx;
		padding: 20.93rpx;
		width: 460.47rpx;
		border-radius: 26.16rpx;
		background: #F5F6FA;
		flex-wrap: wrap;
		justify-content: center;
		
		.amount {
			color:  #141416;
			font-size: 41.86rpx;
			font-weight: 700;
		}
		
		.currency {
			color: #333;
			margin-left: 13.95rpx;
			font-size: 20.93rpx;
			font-weight: 500;
		}
	}
	
	.amount-tip {
		font-size: 20.93rpx;
		font-weight: 300;
		color: #000;
		text-align: center;
	}
	
	.section {
		margin-top: 41.86rpx;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20.93rpx;
		
		.title-line {
			margin-right: 13.95rpx;
			width: 6.98rpx;
			height: 41.86rpx;
			border-radius: 6.98rpx;
			background: #0278DC;
		}
		
		.title-text {
			font-size: 27.91rpx;
			color: #000;
			font-weight: 400;
		}
	}
	
	.qrcode-wrapper {
		display: flex;
		justify-content: center;
		margin-top: 20.93rpx;
		
		.qrcode-bg {
			width: 313.95rpx;
			height: 313.95rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 26.16rpx;
			background: linear-gradient(90deg, #0CB394 0%, #58DBDC 34.72%, #058FC8 71.53%, #037ED7 100%);
			.qrcode-bg2{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 279.07rpx;
				height: 279.07rpx;
				border-radius: 17.44rpx;
				background: #FFFFFF;
			}
		}
	}
	
	.address-box {
		background-color: #F9F9F9;
		border-radius: 13.95rpx;
		padding: 20.93rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.address {
			font-size: 20.93rpx;
			font-weight: 400;
			color: #000;
		}
		
		.copy-icon {
			width: 27.91rpx;
			height: 27.91rpx;
			margin-left: 13.95rpx;
		}
	}
	
	.tips-section {
		margin-top: 41.86rpx;
		padding: 0 13.95rpx;
		
		.tips-title {
			color: #525050;
			font-size: 20.93rpx;
			font-weight: 400;
			margin-bottom: 13.95rpx;
			display: block;
			
		}
		
		.tips-item {
			font-size: 20.93rpx;
			color: #525050;
			margin-bottom: 6.98rpx;
			display: block;
			line-height: 1.2;
		}
	}
	
	.action-button {
		margin-top: 52.26rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>